<template>
    <Card class="data-statistic-card " :bordered="false">
      <p slot="title">
      今日实时数据分析
    </p>
    <div class="charts-border2">
    <div style="text-align:center;">
      <div
        class="dataCount"
        v-for="(item, index) in dataCountList"
        :key="index"
        :style="{ width: '14vw' }">
        <div class="dataCountTitle">{{ item.title }}</div>
        <div class="dataCountContent">{{ item.value }}&nbsp;{{item.unit}}</div>
      </div>
    </div>
        <data-line-charts-traffic
        style="width:100%;height:30vh;margin-top:-30px;padding-bottom:10px;"
        :xAxisDataList="this.hoursData.slice(0,this.nowHour+1)"
        :yAxisData="yAxisData"
      ></data-line-charts-traffic>
    
    </div>
    </Card>
    <!-- <div>
        <Row style="margin-top:20px;">
            <div  class="charts-border" style="width:100%;height:40vh">
                <div style="padding-top:10px;">
                    <DatePicker :options="disableddate"  @on-change="getCongestionData" v-model="congestionTime" format="yyyy年MM月dd日" type="date" placeholder="Select date" style="width: 200px"></DatePicker>
                </div>
                <RoadCongestionStatistics style="padding:10px;"
                class="Charts"
                :totalScoreData = "{title:'拥堵',data:this.congestionData.data}"
                :axisDataList = 'this.congestionData.hours'
                >
                </RoadCongestionStatistics>
            </div>
        </Row>
        <Row >
            <div class="charts-border" style="width:100%;height:40vh;margin-top:10px;">
                <div style="padding-top:10px;">
                    <DatePicker :options="disableddate" @on-change="getTrafficFlowData" v-model="trafficFlowTime" format="yyyy年MM月dd日" type="date" placeholder="Select date" style="width: 200px"></DatePicker>
                </div>
                <TrafficFlowStatistics 
                class="Charts"
                :totalScoreData = "{title:'断面车流',data:this.trafficFlowData.data}"
                :axisDataList = 'this.trafficFlowData.hours'
                >
                </TrafficFlowStatistics>
                
            </div>
        </Row>
    </div> -->
</template>
<script>
import dayjs from 'dayjs'
import DataLineChartsTraffic from "./dataLineChartsTraffic";
import {mapState, mapGetters, mapActions} from 'vuex'
import {reqTrafficStat} from '@/api'
var node_schedule = require("node-schedule");
export default {
    data(){
      return{
        congestionData:[],
        trafficFlowData:[],
        nowHour:24,
        hoursData:["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"],
        //trafficFlowTime:dayjs().format('YYYY-MM-DD'),
        //congestionTime:dayjs().format('YYYY-MM-DD'),
        disableddate: {
            disabledDate (date) {
                return date && date.valueOf() > Date.now();
            }
        },
        dataCountList:[
          {title:'行人入侵',value:0,unit:'次'},
          {title:'违规停车',value:0,unit:'次'},
          {title:'拥堵',value:0,unit:'次'},
          {title:'车流量',value:0,unit:'辆'}
        ]
      }
    },
  components: {
    DataLineChartsTraffic
  },
  computed: {
    ...mapState([
    'monitorData'
    ]),
    yAxisData(){
      return [{'name':'拥堵','data':this.congestionData},{'name':'断面车流','data':this.trafficFlowData}]
    }
  },
  created (){
    this.getTrafficCountData();
    this.getTrafficData();
  },
  mounted() {
    var intervalMonitorStat = node_schedule.scheduleJob("*/10 * * * * *",() => {
        //console.log("实时监控页面视频数据实时获取 -------------> 堵塞与车流!")
        // this.getCongestionData()
        // this.getTrafficFlowData()
        this.getTrafficCountData();
        this.getTrafficData();
      }
    )
    // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
    this.$once("hook:beforeDestroy", () => {
      //console.log("取消 实时监控页面视频数据实时获取 -------------> 堵塞与车流");
      intervalMonitorStat.cancel();
    })
  },
  methods:{
    // async getCongestionData(){
    //   this.congestionData = await this.getTrafficData(this.congestionTime,'e_jam')
    //   //console.log("this.cong:",this.congestionData)
    // },
    // async getTrafficFlowData(){
    //   this.trafficFlowData = await this.getTrafficData(this.trafficFlowTime,'count')
    // },
    async getTrafficData(){
      let start_time = dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss');
      let end_time = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')
      let road_name = this.monitorData.videoMsg.ch_name
      let group = 'hour'
      let params = {
        start_time,
        end_time,
        road_name ,
        group 
      };
      // let hourCount =24;
      // let today = dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss')
      // if(start_time === today){
      //   hourCount = parseInt((dayjs()-dayjs().startOf('day'))/(1000*60*60))
      // }
      let hourCount = parseInt((dayjs()-dayjs().startOf('day'))/(1000*60*60))
      let resData = await reqTrafficStat(params)
      //console.log("hourCount:",hourCount)
      if(resData.code === 6000){

        let congDataList = []
        let traFlowDataList = []
        //let hourList = []
        //console.log(hourCount)
        for(var i = 0;i<=hourCount;i++){
          congDataList.push(resData.data[String(i)]['e_jam'])
          traFlowDataList.push(resData.data[String(i)]['count'])
          
        }
        this.congestionData = congDataList
        this.trafficFlowData = traFlowDataList
        this.nowHour = hourCount
        //this.hoursData = hourList
      }
      
    },
    async getTrafficCountData(){
      let start_time = dayjs().format('YYYY-MM-DD HH:mm:ss');
      let road_name = this.monitorData.videoMsg.ch_name
      let group = 'day'
      let params = {
        start_time,
        road_name,
        group
      }
      let resData = await reqTrafficStat(params)
      if(resData.code === 6000){
        let todayData = resData.data[dayjs().format('D')]
        //console.log("today:",todayData)
        let tmp_list = []
        tmp_list.push({title:'行人入侵',value:todayData['e_person'],unit:'次'})
        tmp_list.push({title:'违规停车',value:todayData['e_stop'],unit:'次'})
        tmp_list.push({title:'拥堵',value:todayData['e_jam'],unit:'次'})
        tmp_list.push({title:'车流量',value:todayData['count'],unit:'辆'})
        this.dataCountList = tmp_list

      }
    }
  }
}
</script>
<style lang="less" >
.dataCount {
  display: inline-block;
  padding: 0.3rem;
  margin: 5px 5px;
  color: #20d1d2;
  height: 6vh;
  vertical-align: middle;
  // border: 1px solid #1081b2;
  border-radius: 4px;
}
.dataCountTitle {
  font-size: 1.8rem;
  height: 20px;
  line-height: 20px;
  color: #fff;
}
.dataCountContent {
  font-size: 3rem;
  font-weight: bold;
  margin-top: 10px;
  color: yellow;
  height: 30px;
  line-height: 30px;
}
.data-statistic-card .ivu-card-head {
  padding: 0px 10px;
  background-color: #13a4c2;
  border-bottom: 1px solid #13a4c2;
  height: 40px;
}
.data-statistic-card .ivu-card-head p {
  font-size: 2rem;
  height: 40px;
  line-height: 40px;
  color: #fff;
  text-align: left;
}
.data-statistic-card .ivu-card-body {
  background-color: #01237C;
  padding: 0px;
}
.ivu-date-picker-header-label{
  color:#fff;
}
.ivu-date-picker-cells-cell{
  color:#fff;
}

.ivu-date-picker-cells-cell:hover{
  color:#000;
}
.ivu-date-picker-cells-cell-disabled{
  background: transparent!important;
}
.base {
  width: 100%;
  margin-top: 5px;
}
.Charts {
  .base;
  height: 80vh;
}
</style>

